
<template>
    <div>
        <!-- 基本信息弹窗 -->
        <Modal
            v-model="basicInfoModal"
            width="1500px"
            styles='text-align:center'
            :closable="false"
            :mask-closable="false"
            footer-hide >
            <div class="container">
                <h2 class="tit">变更复审信息申请填报</h2>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <div class="left-part">
                        <div class="title">机构基本信息</div>
                        <Row style="margin-right: 15px">
                            <Col span="8">    
                            <!-- 机构地址 -->
                            <div class="region">
                                <div class="left">
                                <span>医院地址：</span>
                                </div>
                                <div class="right" > 
                                    <FormItem>
                                        <newfourLevelLinkage
                                            v-if="notReview"
                                            @changeProvince="changeProvince"
                                            @changeCity="changeCity"
                                            @changeArea="changeArea"
                                            :province="Number(formValidate.provinceCode)"
                                            :city="Number(formValidate.cityCode)"
                                            :area="Number(formValidate.districtCode)"   
                                            :jianguan='222' 
                                            ref="newfourLevelLinkage">
                                        </newfourLevelLinkage>
                                    </FormItem>
                                </div>
                                <div class="right" v-if="!notReview">
                                    <FormItem>
                                        <div style="height:35px" v-if="!notReview" >
                                            <span>{{($store.getters.getProvinceList.filter(item => item.id == formValidate.provinceCode)[0] || {}).name}}</span>
                                            <span>{{($store.getters.getCityList(formValidate.provinceCode).filter(item => item.id == formValidate.cityCode)[0] || {}).name}}</span>
                                            <span>{{($store.getters.getAreaList(formValidate.cityCode).filter(item => item.id == formValidate.districtCode)[0] || {}).name}}</span>
                                        </div>
                                    </FormItem>    
                                </div>  
                            </div> 
                            <!-- 单位法人姓名： -->
                            <div class="address hongdian">
                                <div class="left">
                                    <span style="color:red;">*</span>
                                    <span>单位法人姓名：</span>
                                </div>
                                    <FormItem class="right" prop="legalPerson">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.legalPerson"
                                            placeholder
                                            clearable
                                            style="100%"
                                        ></Input>
                                    <div style="height:35px" v-else>{{formValidate.legalPerson}}</div>
                                </FormItem>
                            </div>   
                            <!-- 主要负责人： -->
                            <div class="address">
                                <div class="left">
                                <span>主要负责人：</span>
                                </div>
                                <FormItem class="right">
                                <Input
                                    v-if="notReview"
                                    v-model.trim="formValidate.linkman"
                                    placeholder
                                    clearable
                                    style="margin-right:10px"
                                />
                                <div style="height:35px" v-else>{{formValidate.linkman}}</div>
                                </FormItem>
                            </div> 
                            <!-- 组织类 -->
                            <div class="address">
                                <div class="left">
                                <span>组织类：</span>
                                </div>
                                <div class="right" v-if="notReview">
                                <FormItem prop="hospitalNature">
                                    <Select v-if="notReview" v-model="formValidate.hospitalNature" style="margin-right:5px">
                                    <Option
                                        v-for="item in yljglb"
                                        :value="item.dictName"
                                        :key="item.dictType"
                                    >{{ item.dictName }}</Option>
                                    </Select>
                                    <div style="height:35px" v-else class="content">{{(yljglb.filter((item) => formValidate.hospitalNature === item.dictValue)[0] || {}).dictName}}</div>
                                </FormItem>
                                </div>
                                <!-- <div class="right" v-if="!notReview">
                                <Row gutter="12">
                                    <Col span="6">
                                    <FormItem prop="hospitalNature">                          
                                        <div style="height:35px" class="content">{{(yljglb.filter((item) => formValidate.hospitalNature === item.dictValue)[0] || {}).dictName}}</div>
                                    </FormItem>
                                    </Col>
                                </Row>
                                </div> -->
                            </div>
                            <!-- 医院联系电话 -->
                            <div class="address">
                                <div class="left">
                                <span>医院联系电话：</span>
                                </div>
                                <FormItem class="right">
                                <Input
                                    v-if="notReview"
                                    v-model.trim="formValidate.linkmanTelephone"
                                    maxlength = '25'
                                    placeholder
                                    clearable
                                />
                                <div style="height:35px" v-else>{{formValidate.linkmanTelephone}}</div>
                                </FormItem>
                            </div>            
                            </Col>                 
                            <Col span="8">
                                <!-- 统一社会信用代码 -->
                                <div class="address" style="margin-left: 25px;">
                                    <div class="left">
                                        <span style="color:red;">*</span>
                                        <span>统一社会信用代码：</span>
                                    </div>
                                    <FormItem class="right" prop="orgCode">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.orgCode"
                                        placeholder
                                        clearable
                                        style="100%"
                                        ></Input>
                                        <div style="height:35px" v-else>{{formValidate.orgCode}}</div>
                                    </FormItem>
                                </div>
                                <!-- 执业许可登记号 -->
                                <div class="address">
                                    <div class="left">
                                        <span>执业许可登记号：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.practiceLicense"
                                        placeholder
                                        clearable
                                        style="100%"
                                        ></Input>
                                        <div style="height:35px" v-else>{{formValidate.practiceLicense}}</div>
                                    </FormItem>
                                </div>
                                <!-- 机构等位分级 -->
                                <div class="address">
                                    <div class="left">
                                        <span>机构等位分级：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Select v-if="notReview" v-model="formValidate.grade">
                                        <Option
                                            v-for="item in kbahospitalLevel"
                                            :value="item.dictType"
                                            :key="item.dictType"
                                        >{{ item.dictName}}</Option>
                                        </Select>
                                        <div style="height:35px" v-else class="content">{{(kbahospitalLevel.filter((item) => formValidate.grade === item.dictType)[0] || {}).dictName}}</div>
                                    </FormItem>                      
                                </div>
                                <!-- 单位隶属 -->
                                <div class="address">
                                    <div class="left" style="width: 70px">
                                        <span>单位隶属：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Select v-if="notReview" v-model="formValidate.orgParentCode">
                                        <Option
                                            v-for="item in hospitalSuperior"
                                            :value="item.orgCode"
                                            :key="item.orgCode"
                                            style="z-index:99999"
                                        >{{ item.orgName }}</Option>
                                        </Select>
                                        <div style="height:35px" v-else class="content">{{(hospitalSuperior.filter((item) => formValidate.orgParentCode === item.orgCode)[0] || {}).orgName}}</div>
                                    </FormItem>
                                </div>
                                <!-- 单位介绍 -->
                                <div class="address">
                                    <div class="left">
                                        <span>单位介绍：</span>
                                    </div>
                                    <FormItem class="right">
                                        <docUploadFile :src="hosIntroduction" @getUrl="getUploadUrl" v-if="notReview"></docUploadFile>
                                        <a :href="fileBaseUrl+hosIntroductionUrl">{{hosIntroduction}}</a>
                                        <!-- action="/hospital/uploadOperateFiles" -->
                                        <!-- <Upload :action="uploadUrl">
                                            <Button icon="ios-cloud-upload-outline">选择文件</Button>
                                            <span style="color: #ff9966;margin-left:30px">支持 word 或 pdf 格式</span>
                                        </Upload> -->
                                        <!-- <span>未选择任何文件</span> -->
                                    </FormItem>
                                </div>  
                            </Col>
                            <Col span="8">
                                <!-- 单位名称 -->
                                <div class="address hongdian" >                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>单位名称：</span>
                                    </div>
                                    <FormItem class="right" prop="orgName">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.orgName"
                                        placeholder="请输入机构名称"
                                        clearable  
                                        style="width:100%"       
                                        ></Input>
                                       <div style="height:35px" v-else>{{formValidate.orgName}}</div>
                                    </FormItem> 
                                </div>
                                <!-- 机构第二名称 -->
                                <div class="address" >                     
                                    <div class="left">                     
                                        <span>机构第二名称：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.orgSecondName"
                                        placeholder="请输入机构名称"
                                        clearable                         
                                        ></Input>
                                        <div style="height:35px" v-else>{{formValidate.orgSecondName}}</div>
                                    </FormItem>
                                </div>
                                <!-- 经济类型 -->
                                <div class="address">
                                    <div class="left" style="width: 70px">
                                        <span>经济类型：</span>
                                    </div>
                                    <FormItem class="right" prop="orgParentCode">
                                        <Select v-if="notReview" v-model="formValidate.economicType">
                                        <Option
                                            v-for="item in economics"
                                            :value="item.dictType"
                                            :key="item.dictType"
                                            style="z-index:99999"
                                        >{{ item.dictName }}</Option>
                                        </Select>
                                        <div style="height:35px" v-else class="content">{{(economics.filter((item) => formValidate.economicType === item.dictType)[0] || {}).dictName}}</div>
                                    </FormItem>
                                </div>
                                <!-- 医院具体地址 -->
                                <div class="address">
                                    <div class="left">
                                        <span>医院具体地址：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.hosAddr"
                                        placeholder="请输入详细地址"
                                        clearable
                                        ></Input>
                                    </FormItem>
                                </div>
                                <div class="right">
                                    <FormItem prop="hosAddr">
                                    <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.hosAddr}}</div>
                                    </FormItem>
                                </div> 
                            </Col>
                            <Col span="24">
                                <!-- 变更原因说明 -->
                                <div class="address hongdian" >                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>变更原因说明：</span>
                                    </div>
                                    <FormItem class="right" prop="reasonChange">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.reasonChange"
                                        placeholder="请输入变更原因"
                                        clearable  
                                        style="width:75%"                       
                                        ></Input>
                                        <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.reasonChange}}</div>
                                    </FormItem> 
                                </div>
                            </Col>
                        </Row>
                    </div> 
                </Form>
            </div>
            <div class="btn">
                <Button type="info" v-if="notReview" @click="handleSubmit('formValidate',1)" :disabled="disabled">
                    <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
                    保存并提交
                </Button>
                <Button type="primary" @click="handleSubmit('formValidate',0)" style="margin-left:30px" v-if="notReview" >
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>暂存数据
                </Button>
                <Button @click="basicInfoModal = false" style="margin-left:30px">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭返回
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import docUploadFile from "@/components/docUploadFile";
export default {
    components: {
		newfourLevelLinkage,
        docUploadFile
	},
    props: {
		basicInfoModal: String,
        reasonChange: String,
        id: Number,
	},
    data() {
        return {
            //城市列表
			provList: [],
			cityList: [],
			countyList: [],
			province: null,
			city: null,
			area: null,
            hosIntroduction:"",
            hosIntroductionUrl:"",
            formValidate: {
                //单位介绍
				hosIntroduction:"",
				hosIntroductionUrl:"",
				hospitalType: 1,
				id: null,
				provinceCode: "",
				provinceName: "",
				// 市
				cityCode: "",
				cityName: "",
				//县
				districtCode: "",
				districtName: "",
				//详细地址
				hosAddr: "",
				//机构名称
				orgName: "",
				//机构组织代码
				orgCode: "",
				//机构分类
				property: null,
				orgParentCode: null,
				grade: null,
				hospitalNature: null,
				reasonChange: null,
			},
			ruleValidate: {
				// 单位法人姓名
				legalPerson: [ { required: true, message: "请输入单位法人姓名", trigger: "change" } ],
				// 机构名称
				orgName: [ { required: true, message: "请输入单位名称", trigger: "change" } ],
				// 统一社会信用代码
				orgCode: [ { required: true, message: "请输入统一社会信用代码", trigger: "change" } ],
                // 单位法人姓名
				reasonChange: [ { required: true, message: "请输入变更原因", trigger: "change" } ],
			},
            notReview: true,
            yljglb:[],             //组织类
            // 单位类属
			hospitalSuperior: [],
            backId: '',
        }
    },
    mounted() {
        //获取字典
		this.getGrade()
        // 获取单位隶属
		this.getLastHospital();
        //复审获取详情
        if(this.id) {
            this.$axios.post(api.findSuperviseReviewApplyId, {reviewApplyId: this.id}).then(res => {
				if (res.data.success) {
					let ret = res.data.object || [];
					this.formValidate = ret
                    this.backId = this.formValidate.id
                    this.hosIntroductionUrl = this.formValidate.hosIntroductionUrl;
                    this.hosIntroduction = this.formValidate.hosIntroduction;
				}
			});
        } else {
            //获取机构信息详情
            this.getHospilal()
        }       
    },
    created() {
        
    },
    methods: {
        //单位介绍
		getUploadUrl(map){
            this.formValidate.hosIntroductionUrl = map.url;
            this.formValidate.hosIntroduction = map.name;
            this.hosIntroductionUrl = map.url;
            this.hosIntroduction = map.name;
        },
        //选择省
		changeProvince(val) {
			this.formValidate.provinceCode = val;
			this.provList = this.$store.getters.getProvinceList
			this.provList.forEach(i =>{
				if (i.id == this.formValidate.provinceCode) {
					this.formValidate.provinceName = i.name
				}
			})
		},
		changeCity(val) {
			this.formValidate.cityCode = val
			this.cityList = this.$store.getters.getCityList(this.formValidate.provinceCode);
			this.cityList.forEach(i =>{
				if (i.id == this.formValidate.cityCode) {
					this.formValidate.cityName = i.name
				}
			})
		},
		changeArea(val) {
			this.formValidate.districtCode = val;
			this.countyList = this.$store.getters.getAreaList(this.formValidate.cityCode);
			this.countyList.forEach(i =>{
				if (i.id == this.formValidate.districtCode) {
					this.formValidate.districtName = i.name
				}
			})
		},
        //获取机构信息详情
        getHospilal() {
            this.$axios.post(api.findHospitalByOrgCode, {}).then(resp => {
				let ret = resp.data.object
                this.formValidate = ret
                this.backId = this.formValidate.id
			}).catch(err => {
				console.log(err);
			});
        },
        //获取字典
		getGrade() {
			this.$axios.post(api.findDictType, {}).then(resp => {
				let ret = resp.data.object
				this.infoProteLevel = ret.SECURITY_PROTECTION_LEVEL
				this.emrLevel = ret.EMR_LEVEL
				this.economics = ret.ECONOMICS
				this.yljglb = ret.YLJGLB
				this.kbahospitalLevel = ret.KBA_HOSPITAL_LEVEL
			}).catch(err => {
				console.log(err);
			});
		},
        // 获取单位隶属
		getLastHospital() {
			this.$axios.post(api.findSuperviseHospitalList, {hospitalType: 1}).then(res => {
				if (res.data.success) {
					let ret = res.data.object || [];
					this.hospitalSuperior = ret.map(item => { return {orgCode: item.orgCode, orgName: item.orgName}});
				}
			});
		},
        //更改审核状态
        updateType(val) {
            this.$axios.post(api.updateReviewStatusById, {id: this.id,reviewStatus:val}).then(resp => {
                    this.$Message.success("操作成功");
                    this.disabled = false 
					this.basicInfoModal = false
                    this.$emit('getSuperviseData');
                }).catch(err => {
                    console.log(err);
                });
        },
        // 提交表单
		handleSubmit(name,val) {	    
			this.disabled = true
			this.$refs[name].validate(valid => {
				if (valid) {
					this.hospitalSuperior.forEach(i =>{
                        if(i.orgCode == this.formValidate.orgParentCode){
                            this.formValidate.orgParentName = i.orgName
                        }
					})
					//组织类名称
					// this.yljglb.forEach(i=>{
					// 	if(this.formValidate.hospitalNature == i.dictType){
					// 		this.formValidate.hospitalNatureName = i.dictName
					// 	}
					// })
					//机构等位分级名称
					this.kbahospitalLevel.forEach(i=>{
						if(this.formValidate.grade == i.dictType){
							this.formValidate.gradeName = i.dictName
						}
					})
					//经济类型名称
					this.economics.forEach(i=>{
						if(this.formValidate.economicType == i.dictType){
							this.formValidate.economicTypeName = i.dictName
						}
					})
                    this.formValidate.reviewStatus = val
					if(this.mode === 'add') {
						this.formValidate.id = ''
					}
                    let url;
                    if(this.id){
                        this.formValidate.id = this.backId
                        url = api.updateSuperviseReviewHospital
                    } else {
                        url = api.insertSuperviseReviewHospital
                    }
					console.log(this.formValidate)
					this.$axios
					.post(url, this.formValidate)
					.then(res => {
						if (res.data.code) {
							let ret = res.data;
                            this.updateType(val)
						} else {
							this.disabled = false 
							this.$Message.error(res.data.message);
						}
					})
					.catch(err => {
						this.disabled = false
						this.$Message.error(res.data.err);
					});
				} else {
					this.disabled = false 
					// 必填项填写失败
					this.$Message.error("请检查必填项是否填写正确！");
				}
			});
		},
    },
}
</script>
<style lang="less" scoped>
.tit {
    text-align: center;
    font-weight: 550;
}
.btn {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.container {
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -10px;
        //   margin-left: 35px;
          margin: 10px 0 0 30px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          min-width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
	  .tubiao {
        font-size:16px;
        margin-right:5px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
		.protocol {
			display: flex;
			margin: 0 40px;
			padding-bottom: 15px;
			.sort {
				width: 40%;
				margin-right: 30px;
				font-size: 14px;
				font-weight: 550;
			}
			.dsort {
				width: 16%;
				margin-right: 20px;
				font-size: 14px;
				font-weight: 550;
			}
			.asd {
				display: flex;
				.inputbox {
					width:83%;
					margin-left: 10px;
				}
			}
		}
	 	.b {
			font-size: 14px;
			color: #ff9966;
			margin-left: 20px;
		} 
  }
</style>
